<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>


<center><spring:message code="label.tworzenieSzablonuAnkiety" /></center>
<br />
<br>
<br>
<div>

	
	<spring:message code="label.nazwaSzablonuAnkiety" /> <br> <br>
	<div>
		<div class="input-group">
			<input id="nazwaSzablonuText" type="text" class="form-control"
				placeholder="<spring:message code="label.nazwaSzablonu" />" name="nazwaSzablonu" value="${szablon}"
				<c:out value="${szablon}"/>> <span class="input-group-btn">
				<input type="submit" id="saveButton" value="<spring:message code="label.zapiszSzablon" />"
				class="btn btn-primary" />
			</span>
		</div>



		<div id="panelPytan" class="container">
			<br> <spring:message code="label.dodawaniePytania" /><br> <br>
			<div class="row">

				<div class="col-sm-4">
					<textarea id="trescPytania" class="form-control" rows="5"
						placeholder="<spring:message code="label.tresc" />" required></textarea>
				</div>
				<div class="col-sm-2">
					<form name="radioButtons">
						<div class="radio">
							<label><input id="otwarteRadio" type="radio" name="radio"
								value="otwarte"><spring:message code="label.otwarte" /></label>
						</div>
						<div class="radio">
							<label><input id="zamknieteRadio" type="radio"
								name="radio" value="zamkniete"><spring:message code="label.zamkniete" /></label>
						</div>
					</form>
					<div class="col-sm-12">
<br><br>
					<button type="button" id="dodajPytanie" class="btn btn-primary"
						data-toggle="modal" aria-hidden="true"><spring:message code="label.dodajPytanie" /></button>
						<br><br>
						<button type="button" id="zobaczSzablon" class="btn btn-primary"
						data-toggle="modal" aria-hidden="true"><spring:message code="label.podgladSzablonu" /></button>
				</div>
				</div>

				<div id="panelOpcji" class="col-sm-3" style="right: 15px">
					<ul class="list-group" id="opcjaList">
					</ul>

					<div class="input-group">
						<input id="nowaOpcjaTF" type="text" class="form-control"
							placeholder="<spring:message code="label.nowaOpcja" />" name="trescOpcji"> <span
							class="input-group-btn"> <input type="submit"
							id="dodajOpcje" class="btn btn-primary pull-left" value="<spring:message code="label.dodaj" />" />
						</span>
					</div>

				</div>
				

			</div>

			<div class="row">

				
			</div>


		</div>
	</div>
	<br><br><br>
	<form class="form-inline" id="pytanieId" >
	<input id="idPytania" type="text" class="form-control bfh-number"
				placeholder="<spring:message code="label.numerPytania" />" name="numerPytania"/>
	<button type="button" id="usunPytanie" class="btn btn-primary" ><spring:message code="label.usunPytanie" /></button>
		<input id="liczbaPytan" type="text" <c:out value="${liczbaPytan}"/> value="${liczbaPytan}"/>
</form>
	<br><br>
	<div  id="panelPodgladuSzablonu" class="panel panel-default">

	<div id="headers" class="panel-heading" align="center">
		<h3 class="panel-title">
			<b><spring:message code="label.ankietaOcenyKursu" /></b>
		</h3>
		<br>
		<div id="left">
			<h4 class="panel-title"><spring:message code="label.tytulKursu" /></h4>
		</div>
		<div id="center">
			<h4 class="panel-title"><spring:message code="label.kodKursu" /></h4>
		</div>
		<div id="right">
			<h4 class="panel-title"><spring:message code="label.godzWTyg" /></h4>
		</div>
		<br> <br>
		<div id="left">
			<h4 class="panel-title"><spring:message code="label.nazwiskoNauczyciela" /></h4>
		</div>
		<div id="center">
			<h4 class="panel-title"><spring:message code="label.dataAnkiety" /></h4>
		</div>
		<br>
	</div>
	<div class="panel-body">

	<table class="table">
		<tbody>
				<c:forEach items="${idPytan}" var="idPytania">
				
					<c:choose>
						<c:when test="${idPytania.value == 'otwarte'}">
							<c:forEach items="${pytaniaotwarte}" var="pytanieotwarte">
								<c:if test="${idPytania.key==pytanieotwarte.id}">
									<tr id="wierszpytan">
										<td colspan="${maxLiczbaOpcji}">${pytanieotwarte.tresc}</td>
									</tr>
								</c:if>
							</c:forEach>
						</c:when>

						<c:otherwise>
							<c:forEach items="${pytaniazamkniete}" var="pytaniezamkniete">
								<c:if test="${idPytania.key==pytaniezamkniete.id}">
									<tr id="wierszpytan">
										<td colspan="${maxLiczbaOpcji}">${pytaniezamkniete.tresc}</td>
									</tr>
									<tr>
										<c:forEach items="${pytaniezamkniete.opcjas}" var="opcja">
											<c:forEach items="${opcja.tresc}" var="tresc">
												<td><label><input id="otwarteRadio"
														type="radio" disabled value="otwarte"> ${tresc}</label></td>
											</c:forEach>
										</c:forEach>
									</tr>
								</c:if>
							</c:forEach>
						</c:otherwise>
					</c:choose>
				</c:forEach>


			</tbody>


	</table>
	
		
	</div>
	
	
</div>
</div>

<style>
#pytanieId {
	display: inline;
}

#headers {
	text-align: center;
}

#left {
	float: left;
}

#center {
	display: inline-block;
	margin: 0 auto;
}

#right {
	float: right;
}

#panelPodgladuSzablonu{

width:100%;
}

table {
    counter-reset: rowNumber;
}

#wierszpytan {
    counter-increment: rowNumber;
}

table #wierszpytan td:first-child::before {
    content: counter(rowNumber) ".";
    min-width: 1em;
    margin-right: 0.5em;
}
</style>

	<script type="text/javascript">
		$(document)
				.ready(
						function() {

							document.getElementById("liczbaPytan").style.visibility = "hidden";
							if (document.URL.split("=")[1] == "0") 
							{
								document.getElementById("panelPytan").style.visibility = "hidden";
								document.getElementById("panelPodgladuSzablonu").style.visibility = "hidden";
								document.getElementById("pytanieId").style.visibility = "hidden";
							} 
							else 
							{
								if (document.URL.split("=")[1] == "-1") 
								{
									$("#saveButton").attr("disabled", true);
									$("#nazwaSzablonuText").attr("disabled", true);
									document.getElementById("panelPytan").style.visibility = "visible";
									document.getElementById("panelPodgladuSzablonu").style.visibility = "hidden";
									document.getElementById("pytanieId").style.visibility = "hidden";

								} 
								else {
								if (document.URL.split("=")[1] == "-2") 
								{
									console.log("DDD");
									$("#saveButton").attr("disabled", true);
									$("#nazwaSzablonuText").attr("disabled", true);
									document.getElementById("panelPytan").style.visibility = "visible";
									document.getElementById("panelPodgladuSzablonu").style.visibility = "visible";
									document.getElementById("pytanieId").style.visibility = "visible";

								}
								else{
									$("#saveButton").attr("disabled", true);
									$("#nazwaSzablonuText").attr("disabled", true);
									document.getElementById("panelPytan").style.visibility = "visible";
									document.getElementById("panelPodgladuSzablonu").style.visibility = "hidden";
									document.getElementById("pytanieId").style.visibility = "hidden";
								}
								}
							}

							document.getElementById("zamknieteRadio").checked = true;
							var indexOpcji = 0;
							var tablicaOpcji = new Array();
							var rad = document.radioButtons.radio;
							var prev = null;

							for (var i = 0; i < rad.length; i++) 
							{
								rad[i].onclick = function() 
								{
									if (this !== prev) 
									{
										prev = this;
									}
									if (this.value == "otwarte") 
									{
										document.getElementById("panelOpcji").style.visibility = "hidden";
										for (a = 0; a < indexOpcji; a++) 
										{
											$('#rOpcja' + a).closest("li").remove();
										}
										tablicaOpcji = new Array();
									} 
									else if (this.value == "zamkniete") 
									{
										document.getElementById("panelOpcji").style.visibility = "visible";
									}
								};
							}

							$("#dodajPytanie")
									.click(
											function() {
												document.getElementById("panelPodgladuSzablonu").style.visibility = "hidden";
												document.getElementById("pytanieId").style.visibility = "hidden";
												if (document.getElementById("otwarteRadio").checked) {

													if ($("#trescPytania").val() == "") 
													{
														document.getElementById("trescPytania").style.outline = "red solid 2px";
														return 0;
													}
													$.ajax({
																url : "<spring:url value='./dodajpytanieotwarte.html'/>",
																type : "post",
																data : {
																	tresc : function() 
																	{
																		return $("#trescPytania").val();
																	}
																},
																success : function(data) 
																{
																	$("#trescPytania").val("");
																	document.getElementById("trescPytania").style.outline = "white solid 1px";
																	alert("Dodano pytanie otwarte.");
																}
															});
												} 
												else 
												{
													console.log("pytanie zamkniete");
													var brakTresci = false;
													var brakOpcji = false;
													if ($("#trescPytania").val() == "") 
													{
														document.getElementById("trescPytania").style.outline = "red solid 2px";
														brakTresci = true;
														console.log("brak tresci");
													}
													console.log(tablicaOpcji.length);
													if (tablicaOpcji.length == 0) 
													{
														document.getElementById("nowaOpcjaTF").style.outline = "red solid 2px";
														brakOpcji = true;
														console.log("brak opcji");
													}
													if (!brakTresci) 
													{
														document.getElementById("trescPytania").style.outline = "white solid 1px";
													}
													if (brakTresci || brakOpcji) 
													{
														return 0;
													} 
													else 
													{
														$.ajax({
																	url : "<spring:url value='./dodajpytaniezamkniete.html'/>",
																	type : "post",
																	data : {
																		tresc : function() 
																		{
																			return $("#trescPytania").val();
																		},
																		opcje : function() 
																		{
																			console.log(tablicaOpcji);
																			return tablicaOpcji;
																		}
																	},
																	success : function(data) 
																	{
																		$("#trescPytania").val("");
																		$("#dodawanaOpcja").val();

																		for (a = 0; a < indexOpcji; a++) 
																		{
																			$('#rOpcja' + a).closest("li").remove();
																		}
																		tablicaOpcji = new Array();
																		alert("Dodano pytanie zamkniete.");
																	}
																});

													}

													document.getElementById("nowaOpcjaTF").style.outline = "white solid 1px";
												}
											});

						
		$("#saveButton")
									.click(
											function() {
												console.log($("#nazwaSzablonuText").val());
												var nazwaSzablonu = "";
												nazwaSzablonu = $("#nazwaSzablonuText").val();
												
												if ($("#nazwaSzablonuText").val() == "") {
													document.getElementById("nazwaSzablonuText").style.outline = "red solid 2px";
													return 0;
												}
												if (nazwaSzablonu.search(",") != -1) {
													document.getElementById("nazwaSzablonuText").style.outline = "red solid 2px";
													alert("Niedozwolony znak: ',' ");
													return 0;
												}										
												if(nazwaSzablonu.substring(0, 1) == (" ")|| nazwaSzablonu.substring(nazwaSzablonu.length-1, nazwaSzablonu.length) == (" "))
												{
													document.getElementById("nazwaSzablonuText").style.outline = "red solid 2px";
													alert("Nazwa szablonu nie może zaczynać ani kończyć spacją.");
													return 0;
												}
												
												var nazwySzablonow = '${nazwySzablonow}';
												var nazwySzablonow = nazwySzablonow.substring(1,nazwySzablonow.length - 1);
												var wszystkieSzablony = nazwySzablonow.split(", ");
												console.log(wszystkieSzablony);

												var istniejeSzablon = false;
												console.log(wszystkieSzablony.length);
												
												for (a = 0; a < wszystkieSzablony.length; a++) {
													console.log(wszystkieSzablony[a]);
													
													if (wszystkieSzablony[a] == $("#nazwaSzablonuText").val()) {
														istniejeSzablon = true;
													}
												}
												if (istniejeSzablon) {
													document.getElementById("nazwaSzablonuText").style.outline = "red solid 2px";
													alert("Istnieje szablon o podanej nazwie!");
													return 0;
												}

												$
														.ajax({
															url : "<spring:url value='./dodajszablon.html'/>",
															type : "post",
															data : {
																nazwaSzablonu : function() {
																	return $("#nazwaSzablonuText").val();
																}
															},
															success : function(
																	data) {
																
																$("#saveButton").attr("disabled",true);
																$("#nazwaSzablonuText").attr("disabled", true);
																document.getElementById("panelPytan").style.visibility = "visible";
																document.getElementById("nazwaSzablonuText").style.outline = "white solid 1px";

																var newurl = document.URL;
																console.log(newurl);
																newurl = newurl.split("=")[0];
																newurl = newurl + "=-1";
																window.location.replace(newurl);
																console.log(data);
															}
														});
											});

							$("#dodajOpcje")
									.click(

											function() {

												if ($("#nowaOpcjaTF").val() == "") {
													document.getElementById("nowaOpcjaTF").style.outline = "red solid 2px";
													return 0;
												}
												var opcjaIstnieje = false;
												for (a = 0; a < tablicaOpcji.length; a++) {
													if (tablicaOpcji[a] == $("#nowaOpcjaTF").val()) {
														opcjaIstnieje = true;
													}
												}
												if (opcjaIstnieje) {
													document.getElementById("nowaOpcjaTF").style.outline = "red solid 2px";
													alert("Opcje nie moga sie powtarzac!");
													return 0;

												}
												var dodajNowaOpcje = $(
														"<li></li>",
														{
															id : "opcja" + indexOpcji,
														});
												dodajNowaOpcje
														.addClass("list-group-item synonim-li");
												dodajNowaOpcje
														.html("<div class='row'><div class='col-md-10'>"
																+ "<input id='dodawanaOpcja"
																+ indexOpcji
																+ "' type='hidden' name='opcje' value='"
																+ $('#nowaOpcjaTF').val()
																+ "'/>"
																+ $('#nowaOpcjaTF').val()
																+ "</div>"
																+ "<div class='col-md-2' align='right'><a href='#' id='rOpcja" + indexOpcji + "'> <span class='glyphicon glyphicon-remove'></span></a></div></div>");

												$('#opcjaList').append(dodajNowaOpcje);
												tablicaOpcji.push($("#nowaOpcjaTF").val());
												$('#nowaOpcjaTF').val("");
												document.getElementById("nowaOpcjaTF").style.outline = "white solid 1px";
												
												$('#rOpcja' + indexOpcji)
														.click(
																function() {
																	var index = $(this).attr("id").split("rOpcja")[1];
																	var usuwanyIndex = "dodawanaOpcja" + index;
																	var usuwanaWartosc = document.getElementById(usuwanyIndex).value;

																	for (a = 0; a < tablicaOpcji.length; a++) {
																		if (tablicaOpcji[a] == usuwanaWartosc) {
																			 tablicaOpcji.splice(a,1);
																		}
																	}
																	$(this).closest("li").remove();

																});
												indexOpcji++;
											});

							$("#zobaczSzablon")
							.click(
									function() {
										console.log("AAA");
										var newurl = document.URL;
										console.log(newurl);
										newurl = newurl.split("=")[0];
										newurl = newurl + "=-2";
										window.location.replace(newurl);
									});
							
							$("#usunPytanie").click(function() {
								
								if(Number($("#idPytania").val())>Number($("#liczbaPytan").val()) || isNaN(Number($("#idPytania").val())) || Number($("#idPytania").val())<=0){
									alert("Podaj poprawny numer pytania!");
								}
								else{
								var newurl = document.URL;
								newurl = newurl.split("two")[0];
								console.log(newurl);
								var idSzablonu = document.URL.split("=")[1];
								console.log(idSzablonu);
								newurl = newurl.concat("usunpytanie.html");
								console.log(newurl);
								
								$.ajax({
									url : newurl,
									type : "post",

									data : {
										szablonId : function() {
											var id= Number(idSzablonu);
											console.log(id);
											return  id;
										},
										
										pytanieNumer : function() {
											console.log(Number($("#idPytania").val()));
											return  Number($("#idPytania").val());
										},
										
										szablonNazwa : function() {
											console.log($("#nazwaSzablonuText").val());
											return  $("#nazwaSzablonuText").val();
										}
									},
									success : function(data) {

										alert("Poprawnie usunięto pytanie");
										var newurl = document.URL;
										console.log(newurl);
										newurl = newurl.split("=")[0];
										newurl = newurl + "=-2";
										window.location.replace(newurl);
										}
								});
								
								}
							});
						});
	</script>



